Live Codeblock

安裝 Live Code blocks Extension
建立互動式的 CodeBlocks

1. 安裝

在 docusaurus 的目錄下 (含有 package.json 的那一層目錄)

npm install --save @docusaurus/theme-live-codeblock

2. 設定 docusaurus.config.js

const config = {
  // ...
  themes: ['@docusaurus/theme-live-codeblock'],
  // ...
}

Sample Live Code blocks

即時編輯器

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

結果

Loading...

參考資料

• Docusaurus - Interactive code editor